<template>
  <div
    class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-screen h-1/2 bg-white border-solid border-green-400 border-2 rounded-xl"
  >
    <header class="flex items-center justify-center h-8">
      <slot name="header"></slot>
    </header>
    <main class="">
      <slot></slot>
    </main>
    <footer class="flex items-center justify-center h-4 relative">
      <slot name="footer"></slot>
    </footer>
    <!-- 关闭按钮 -->
    <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2" @click="close">
      <van-icon name="close" size="50" color="#37d6b8"/>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["close"]); // 创建一个add事件
const close = () => {
  // 将数据传递给父组件
  emit("close"); // 第一个参数是事件名，第二个参数是要传递的数据 发布事件
};

</script>

<style lang="less" scoped></style>
